<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择收货地址</title>
    <style>
        #map {
            height: 500px; /* 调整地图容器的高度 */
            width: 1000px; /* 调整地图容器的宽度 */
        }

        #search-input {
            width: 200px;
            height: 30px;
            padding: 5px 10px;
        }

        #search-button {
            height: 34px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<h2>选择收货地址</h2>
<div id="map"></div>
<p>当前地址： <span id="address"></span></p>
<input id="search-input" placeholder="搜索地址" type="text">
<button id="search-button">搜索</button>

<script src="http://api.map.baidu.com/api?v=3.0&ak=inUVkD8RujZ04DbcOIi0KZ6HebLytyQU"></script>
<script src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js" type="text/javascript"></script>
<script>
    // 初始化地图
    var map = new BMap.Map("map");

    // 使用浏览器定位功能获取当前位置
    function getLocation() {
        navigator.geolocation.getCurrentPosition(function (position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 创建地图中心点的坐标
            var centerPoint = new BMap.Point(longitude, latitude);

            // 将地图中心设置为当前位置
            map.centerAndZoom(centerPoint, 14);

            // 添加地图控件
            map.addControl(new BMap.NavigationControl());

            // 在地图上添加标记
            var marker = new BMap.Marker(centerPoint);
            map.addOverlay(marker);

            // 反向地理编码，获取地址信息
            var geoc = new BMap.Geocoder();
            geoc.getLocation(centerPoint, function (rs) {
                var address = rs.address;
                document.getElementById("address").textContent = address;

                // 输出经纬度
                var lng = centerPoint.lng;
                var lat = centerPoint.lat;
                console.log("经度：" + lng + "，纬度：" + lat);
            });
        });
    }

    // 调用获取位置函数
    getLocation();

    // 添加地图点击事件监听器
    map.addEventListener("click", function (e) {
        // 清除之前的标记
        map.clearOverlays();
        var point = e.point;

        // 在地图上添加标记
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);

        // 反向地理编码，获取地址信息
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
            var address = rs.address;
            document.getElementById("address").textContent = address;

            // 输出经纬度
            var lng = point.lng;
            var lat = point.lat;
            console.log("经度：" + lng + "，纬度：" + lat);
        });
    });

    // 地图搜索功能
    var searchInput = document.getElementById("search-input");
    var searchButton = document.getElementById("search-button");

    searchButton.addEventListener("click", function () {
        var keyword = searchInput.value.trim();
        if (keyword !== "") {
            var local = new BMap.LocalSearch(map, {
                onSearchComplete: function (LocalResult) {
                    if (local.getStatus() === BMAP_STATUS_SUCCESS) {
                        if (LocalResult && LocalResult.getNumPois() > 0) {
                            var point = LocalResult.getPoi(0).point;
                            map.clearOverlays();
                            var marker = new BMap.Marker(point);
                            map.addOverlay(marker);
                            map.panTo(point); // 居中显示搜索结果的坐标点
                            map.setZoom(14); // 设置缩放级别
                            document.getElementById("address").textContent = LocalResult.getPoi(0).address;
                            console.log("经度：" + point.lng + "，纬度：" + point.lat);
                        }
                    }
                }
            });
            local.search(keyword);
        }
    });

    map.addEventListener("mouseover", function () {
        map.enableScrollWheelZoom(); // 启用滚轮缩放
    });

    map.addEventListener("mouseout", function () {
        map.disableScrollWheelZoom(); // 关闭滚轮缩放
    });

</script>
</body>
</html>
